<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>商品展示</title>
<script src="/js/jquery-2.1.1.min.js"></script>
<script>
	//记录加载次数
	var time=1;
	if (typeof (EventSource) !== "undefined") {
		var source = new EventSource("/sse/countDown");
		console.log(source);
		source.addEventListener("countDown", function(e) {
			document.getElementById("result").innerHTML = e.data;
		}, false);//使用false表示在冒泡阶段处理事件，而不是捕获阶段。
	} else {
		document.getElementById("result").innerHTML = "抱歉，你的浏览器不支持 server-sent 事件...";
	}
	/************************以上是SSE的JS************************/
	$(function() {
		var xhr = new XMLHttpRequest();
		xhr.open('GET', '/commodity/findAll');
		xhr.send(null);//发送请求
		xhr.onreadystatechange = function() {
			//2是空响应，3是响应一部分，4是响应完成
			if (xhr.readyState > 2) {
				//这儿可以使用response与responseText，因为我接口返回的就是String数据，所以选择responseText
				var newData = xhr.response.substr(xhr.seenBytes);
				newData = newData.replace(/\n/g, "#");
				newData = newData.substring(0, newData.length - 1);
				var data = newData.split("#");
				//显示加载次数，和大小
				$("#dataModule").append("第"+time+"次数据响应"+data.length+"条          ");
				
				$("#note").append("<div style='clear: both;'>第"+time+"次数据响应"+data.length+"条</div><div id='note"+time+"' style='width: 100%;'></div>");
				var html="";
				for (var i = 0; i < data.length; i++) {
					 var obj = JSON.parse(data[i])
					 html=html + "<div style='margin-left: 10px;margin-top: 10px; width: 80px;height: 80px;background-color: gray;float: left;'>"+obj.name+"</div>";
				}
				$("#note"+time).html(html);
				time++;
				xhr.seenBytes = xhr.response.length;
			}
		}
	})
</script>
</head>
<body>

	<div id="result"></div><br/>
	<div id="dataModule"></div><br/>
	<div id="note" style="width: 100%;" >
	</div>
</body>
</html>